<template>
  <div id="app">
    <div class="container">
      <h2>button</h2>
      <h4>基础用法</h4>
      <yd-button>默认按钮</yd-button>
      <h4>type类型</h4>
      <yd-button type="primary">主要按钮</yd-button>
      <yd-button type="success">成功按钮</yd-button>
      <yd-button type="warning">警告按钮</yd-button>
      <yd-button type="danger">危险按钮</yd-button>
      <yd-button type="info">信息按钮</yd-button>
      <h4>text文字型</h4>
      <yd-button type="primary" text>文字按钮</yd-button>
      <yd-button type="success" text>文字按钮</yd-button>
      <yd-button type="warning" text>文字按钮</yd-button>
      <yd-button type="danger" text>文字按钮</yd-button>
      <yd-button type="info" text>文字按钮</yd-button>
      <h4>round圆角</h4>
      <yd-button type="primary" round>主要按钮</yd-button>
      <yd-button type="success" round>成功按钮</yd-button>
      <yd-button type="warning" round>警告按钮</yd-button>
      <yd-button type="danger" round>危险按钮</yd-button>
      <yd-button type="info" round>信息按钮</yd-button>
      <h4>size尺寸</h4>
      <yd-button size="medium">中等按钮</yd-button>
      <yd-button size="small">小型按钮</yd-button>
      <yd-button size="mini">迷你按钮</yd-button>
    </div>

    <div class="container">
      <h2>carousel</h2>
      <carousel
        ref="carousel"
        :autoplay="true"
        :duration="3000"
        :initial="0"
        :director="true"
        :dots="true"
        dotBgColor="#fff"
        height="300px"
      >
        <car-item v-for="item in carData" :key="item">
          <img :src="require(`./assets/img/${item.img_name}`)" />
        </car-item>
      </carousel>
      <br />
      <yd-button @click="$refs.carousel.prev()">上一张</yd-button>
      <yd-button @click="$refs.carousel.next()">下一张</yd-button>
    </div>

    <div class="container">
      <h2>switch</h2>
      <h4>v-model绑定</h4>
      <yd-switch v-model="switch1"></yd-switch>
      <br />
      <h4>:value绑定</h4>
      <yd-switch :value="switch2.num==3" @click="handleClick(switch2)"></yd-switch>
      <h4>指定颜色和开启关闭对应的值</h4>
      <yd-switch
        v-model="switch3"
        active-value="1"
        inactive-value="2"
        active-color="#67c23a"
        inactive-color="#f56c6c"
        @change="handleChange"
      ></yd-switch>
    </div>

    <div class="container">
      <h2>Dialog</h2>
      <yd-button type="primary" @click="visible=true">点击打开Dialog</yd-button>
      <yd-dialog
        title="标题"
        width="400px"
        top="15vh"
        v-model:visible="visible"
        @closed="handleClose"
      >
        <template v-slot:title>标题插槽</template>
        <div>这是一段内容</div>
        <template v-slot:footer>
          <yd-button size="small" @click="visible=false">取消</yd-button>
          <yd-button type="primary" size="small" @click="visible=false">确定</yd-button>
        </template>
      </yd-dialog>
      <br />
      <br />
      <yd-button type="primary" @click="visible2=true">禁止点击modal关闭</yd-button>
      <yd-dialog
        title="标题"
        width="400px"
        top="15vh"
        v-model:visible="visible2"
        :close-on-click-modal="false"
        @closed="handleClose"
      >
        <template v-slot:title>标题插槽</template>
        <div>这是一段内容</div>
        <template v-slot:footer>
          <yd-button size="small" @click="visible2=false">取消</yd-button>
          <yd-button type="primary" size="small" @click="visible2=false">确定</yd-button>
        </template>
      </yd-dialog>
    </div>

    <div class="container">
      <h2>collapse 折叠面板</h2>
      <h4>基础用法</h4>
      <yd-button type="primary" @click="activeNames=['3']" size="small">可设置指定展开</yd-button>
      <br />
      <br />
      <collapse v-model="activeNames" @change="handleChange2">
        <collapse-item title="一致性 Consistency" name="1">
          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
          <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
        </collapse-item>
        <collapse-item title="反馈 Feedback" name="2">
          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </collapse-item>
        <collapse-item title="效率 Efficiency" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
        </collapse-item>
        <collapse-item name="4">
          <template v-slot:title>可控 Controllability</template>
          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
        </collapse-item>
      </collapse>

      <h4>管风琴效果</h4>
      <collapse v-model="activeName" accordion @change="handleChange2">
        <collapse-item title="一致性 Consistency" name="1">
          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
          <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
        </collapse-item>
        <collapse-item title="反馈 Feedback" name="2">
          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </collapse-item>
        <collapse-item title="效率 Efficiency" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
        </collapse-item>
        <collapse-item name="4">
          <template v-slot:title>可控 Controllability</template>
          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
        </collapse-item>
      </collapse>
    </div>

    <div class="container">
      <h2>select</h2>
      <h4>基础用法</h4>
      <yd-select v-model="selActive" placeholder="请选择">
        <yd-option
          v-for="item in selOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></yd-option>
      </yd-select>
      <h4>可清空单选</h4>
      <yd-select v-model="selActive" clearable>
        <yd-option
          v-for="item in selOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></yd-option>
      </yd-select>
      <h4>自定义选项模板</h4>
      <yd-select v-model="selActive">
        <yd-option
          v-for="item in selOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span style="color:red">{{item.value}}.</span>
          <span style="color:green">{{item.label}}</span>
        </yd-option>
      </yd-select>
      <h4>可搜索选项</h4>
      <yd-select v-model="selActive" filterable placeholder="输入关键字搜索">
        <yd-option
          v-for="item in selOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></yd-option>
      </yd-select>
    </div>

    <div class="container">
      <h2>input</h2>
      <h4>基础用法</h4>
      <yd-input v-model="inputValue" placeholder="请输入内容"></yd-input>
      <h4>可清空</h4>
      <yd-input v-model="inputValue" clearable></yd-input>
      <h4>密码框</h4>
      <yd-input v-model="inputValue" type="password" placeholder="请输入密码"></yd-input>
      <h4>自定义 icon 图标</h4>
      <yd-input v-model="inputValue">
        <template #rightIcon>
          <yd-button type="primary">Q</yd-button>
        </template>
      </yd-input>
      <h4>输入长度限制</h4>
      <yd-input v-model="inputValue" show-word-limit maxlength="10"></yd-input>
    </div>

    <div class="container">
      <h2>radio</h2>
      <h4>基础用法</h4>
      <yd-radio value="1" v-model="radioValue1">选项一</yd-radio>
      <yd-radio value="2" v-model="radioValue1">选项二</yd-radio>
      <h4>单选框组</h4>
      <yd-radio-group v-model="radioValue2">
        <yd-radio value="1">选项一</yd-radio>
        <yd-radio value="2">选项二</yd-radio>
      </yd-radio-group>
    </div>

    <div class="container">
      <h2>checkbox</h2>
      <h4>基础用法</h4>
      <yd-checkbox v-model="checkbox1">是否选中</yd-checkbox>
      <h4>多选框组</h4>
      <yd-checkbox-group v-model="checkbox2">
        <yd-checkbox value="1">选项一</yd-checkbox>
        <yd-checkbox value="2">选项二</yd-checkbox>
        <yd-checkbox value="3">选项三</yd-checkbox>
      </yd-checkbox-group>
    </div>

    <div class="container">
      <h2>Drawer</h2>
      <div style="display:flex;align-items:center">
        <yd-radio-group v-model="drawerDirection">
          <yd-radio value="left">左侧滑出</yd-radio>
          <yd-radio value="right">右侧滑出</yd-radio>
        </yd-radio-group>
        <yd-button type="primary" @click="drawerVisible=true">点击打开Drawer</yd-button>
      </div>
      <yd-drawer
        title="标题"
        width="400px"
        :direction="drawerDirection"
        v-model:visible="drawerVisible"
        @closed="handleClose"
      >
        <div>这是一段内容</div>
        <template v-slot:footer>
          <yd-button size="small" @click="drawerVisible=false">取消</yd-button>
          <yd-button type="primary" size="small" @click="drawerVisible=false">确定</yd-button>
        </template>
      </yd-drawer>
    </div>

    <div class="container">
      <h2>Tabs</h2>
      <div style="padding:20px;border: 1px solid #ebebeb">
        <yd-tabs v-model="activeTabs">
          <yd-tab-pane label="用户管理" name="1">用户管理</yd-tab-pane>
          <yd-tab-pane label="配置管理" name="2">配置管理</yd-tab-pane>
          <yd-tab-pane label="角色管理" name="3">角色管理</yd-tab-pane>
          <yd-tab-pane label="定时任务补偿" name="4">定时任务补偿</yd-tab-pane>
        </yd-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import carData from "@/data/carousel";
export default {
  name: "App",
  setup() {
    const demo = val => {
      console.log(val);
    };
    //Switch
    let switch1 = ref(true);
    let switch2 = reactive({
      num: 2
    });
    let switch3 = ref(1);
    const handleChange = val => {
      console.log("改变后的switch值：" + val);
    };
    const handleClick = obj => {
      obj.num = 3;
    };
    //Dialog
    let visible = ref(false);
    let visible2 = ref(false);
    const handleClose = () => {
      console.log("关闭回调");
    };
    //Collapse
    const state = reactive({
      activeNames: ["1", "2"],
      activeName: ""
    });
    const handleChange2 = data => {
      console.log(data);
    };

    //select
    const select = reactive({
      selActive: "",
      selOption: [
        {
          label: "苹果",
          value: "1"
        },
        {
          label: "香蕉",
          value: "2"
        },
        {
          label: "菠萝蜜",
          value: "3"
        }
      ]
    });
    //input
    let inputValue = ref("");

    //radio
    const radio = reactive({
      radioValue1: "1",
      radioValue2: "1"
    });

    //checkbox
    const checkbox = reactive({
      checkbox1: true,
      checkbox2: ["1", "2"]
    });

    //drawer
    let drawer = reactive({
      drawerVisible: false,
      drawerDirection: "left"
    });

    //tabs
    let activeTabs = ref("1");

    return {
      //data
      carData,
      switch1,
      switch2,
      switch3,
      visible,
      visible2,
      inputValue,
      activeTabs,
      ...toRefs(state),
      ...toRefs(select),
      ...toRefs(radio),
      ...toRefs(checkbox),
      ...toRefs(drawer),

      //methods
      demo,
      handleChange,
      handleClick,
      handleClose,
      handleChange2
    };
  }
};
</script>

<style lang="scss">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
//   margin-top: 60px;
// }

.container {
  width: 600px;
  margin: 20px auto;
}
</style>
